<template>
  <div>
    <div class="header">
      <Header :isEditor="true" :id="id" />
    </div>
    <!-- 编辑器主体 -->
    <div class="container">
      <LeftSide />
      <RightSide />
    </div>
    <div>
      <Center />
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Common/Header.vue'
import LeftSide from '@/views/EditorView/LeftSide/index.vue'
import Center from '@/views/EditorView/Center/index.vue'
import RightSide from '@/views/EditorView/RightSide/index.vue'
import { dispatchStatus } from '@/stores/dispatch'
import { useEditorStore } from '@/stores/useEditor'
import { isPicLink, type PicLink } from '@/types'
const route = useRoute() // 正确调用函数获取路由对象
const id = computed(() => (route?.params?.id ? String(route?.params?.id) : ''))
const store = useEditorStore()
const currentCom = computed(() => {
  return store.coms[store.currentComIndex]
})
// 拿到新的状态数据，然后修改仓库里面的数据
const updateStatus = (configKey: string, payload?: any) => {
  console.log(configKey, payload)
  const status: any = currentCom.value.status
  dispatchStatus(store, status, configKey, payload)
}
provide('updateStatus', updateStatus)
const getLink = (link: PicLink) => {
  updateStatus('options', link)
}
provide('getLink', getLink)
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  background-color: var(--white);
  position: fixed;
  top: 0;
  z-index: 10;
}
.container {
  width: calc(100vw - 40px);
  padding: 20px;
  // Header的高度50px，上下padding 20px
  height: calc(100vh - 50px - 40px);
  background: url('@/assets/imgs/editor_background.png');
  position: fixed;
  top: 50px;
}
</style>
